<template>
  <view class="myaddress">
	<view v-if="addressList && addressList.length">
	  	<view
	  	  class="box space-between"
	  	  v-for="(item, index) in addressList"
	  	  :key="index"
	  	  @click="toBack(item)"
	  	>
	  	  <view class="left row">
	  	    <view class="checkbox">
	  	      <u-checkbox-group
	  	        v-model="allCheckbox"
	  	        placement="column"
	  	        shape="circle"
	  	        @change="checkboxAll"
	  	      >
	  	        <u-checkbox
	  	          :customStyle="{ marginTop: '3px' }"
	  	          :name="item.id"
	  	          :iconSize="25"
	  	          :size="25"
	  	        >
	  	        </u-checkbox>
	  	      </u-checkbox-group>
	  	    </view>
	  	    <view class="info">
	  	      <view class="address">{{
	  	        item.c_name + item.w_name + item.state+ item.city+ item.detail +'（'+item.email+'）'
	  	      }}</view>
	  	      <view class="name">{{item.real_name}}</view>
	  	      <view class="phone">{{ item.phone | formatPhone }}</view>
	  	    </view>
	  	  </view>
	  	  <view class="right">
	  	    <view class="icon" @click="edit(item)">
	  	      <u-image
	  	        src="/static/icon/address-edit.png"
	  	        width="36rpx"
	  	        height="36rpx"
	  	      ></u-image>
	  	    </view>
	  	    <view class="icon bottom" @click="del(item)">
	  	      <u-image
	  	        src="/static/icon/delete.png"
	  	        width="36rpx"
	  	        height="36rpx"
	  	      ></u-image>
	  	    </view>
	  	  </view>
	  	</view>
	</view>
	<view v-else class="empty" >
		暂无数据...
	</view>
    <view class="btn">
      <view class="btnimg center" @click="toAddAddress()">
        <u-image
          src="/static/icon/address-add.png"
          width="30rpx"
          height="30rpx"
        ></u-image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 全选
      allCheckbox: [0],
      // 收货地址列表
      addressList: [
        // {
        //   id: 0,
        //   name: "张三",
        //   phone: "17644547564",
        //   country: "美国",
        //   area: "加力福尼亚洲 洛杉矶",
        //   address: "华尔街2箱9号",
        //   default: true,
        // },
      ],
	  page:1,
	  limit:8,
	  form:''
    };
  },

  onLoad(options) {
	  if(options.form){
		  this.form = JSON.parse(options.form);
	  }
    // if (options.info) {
    //   let info = JSON.parse(options.info);
    //   info.id = this.addressList.length;
    //   this.addressList.push(info);
    //   if (info.default) {
    //     this.allCheckbox = [];
    //     this.allCheckbox.push(info.id);
    //   }
    //   this.addressList = this.addressList.reverse();
    // }
  },
  onShow() {
  	this.getAddressList();
  },
  methods: {
	toAddAddress(){
		if(this.form){
			this.$uniApi.to(`/pages/my/addAddress?form=${JSON.stringify(this.form)}`);
		}else{
			this.$uniApi.to("/pages/my/addAddress")
		}
	},
	toBack(item){
		console.log(this.form,"this.form 123")
		if(this.form){
			this.form['defaultAddress'] = item;
			let url = this.form.url;
			delete this.form.url;
			this.$uniApi.to(`${url}?form=${JSON.stringify(this.form)}`);
		}
	},
	getAddressList(){
	  this.allCheckbox = []
	  this.$api.post({
		  url: "/ebapi/user_api/user_address_list",
		  data: {
			  page:this.page,
			  limit:this.limit
		  },
		  success: (res) => {
			this.addressList = res;
			let defaultAddress = res.filter(item=>item.is_default == 1);
			this.allCheckbox = defaultAddress && defaultAddress[0] && [defaultAddress[0].id] || [];
			console.log(defaultAddress,"defaultAddress",this.allCheckbox,"this.allCheckbox")
		},
	  })
	},
    // 全选
    checkboxAll(e) {
	  let searchId = '';
	  let nowAddress = '';
      if (e[0]) {
        this.allCheckbox = [];
        this.allCheckbox.push(e[0]);
		searchId = e[0];
      } else {
        this.allCheckbox = [];
      }
	  for (var i = 0; i < this.addressList.length; i++) {
	  	if(searchId && this.addressList[i].id == searchId){
			nowAddress = this.addressList[i];
			nowAddress.is_default = true;
			this.mdfDefaultAddress(nowAddress);
			return
		}
		if(!searchId && this.addressList[i].is_default == 1){
			nowAddress = this.addressList[i];
			nowAddress.is_default = false;
			this.mdfDefaultAddress(nowAddress);
			return
		}
	  }
    },
	mdfDefaultAddress(item){
		let reqData = JSON.parse(JSON.stringify(item));
		// reqData.is_default = item.is_default==1?true:false;
		delete reqData.w_name;
		delete reqData.c_name;
		this.$api.post({
		    url: "/ebapi/user_api/edit_user_address",
		    data: reqData,
		    success: (res) => {
				uni.showToast({
					title:"修改成功！",
					icon:'none'
				})
				this.getAddressList();
			},
		 })
	},
    // 删除订单
    del(item) {
      uni.showModal({
        title: "提示",
        content: "是否确认删除？",
        success: (res) => {
          if (res.confirm) {
            // 确定
            // this.addressList.forEach((goods, index) => {
            //   if (goods.id == item.id) {
            //     this.addressList.splice(index, 1);
            //   }
            // });
			this.$api.post({
			    url: "/ebapi/user_api/remove_user_address",
			    data: {addressId:item.id},
			    success: (res) => {
					this.getAddressList();
				},
			 })
          } else if (res.cancel) {
            // 取消
            console.log("用户点击了取消");
          }
        },
      });
    },
    // 编辑
    edit(ditem) {
      let info = JSON.stringify(ditem);
      this.$uniApi.to("/pages/my/addAddress?info=" + info);
    },
  },
};
</script>

<style lang="scss">
.myaddress {
  padding-top: 24rpx;

  .box {
    padding: 30rpx 24rpx 33rpx 30rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 10rpx 1rpx rgba(0, 0, 0, 0.08);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
    margin-bottom: 24rpx;

    .left {
      .info {
        margin-left: 30rpx;

        .address {
          font-size: $uni-text-size-title;
        }

        .name,
        .phone {
          color: #999999;
        }

        .name {
          margin: 15rpx 0;
        }
      }
    }

    .right {
      .bottom {
        margin-top: 40rpx;
      }
    }
  }

  .btn {
	  position: fixed;
	  bottom: 20vh; right: 23rpx;
    // margin-top: 90rpx;
    // display: flex;
    // justify-content: flex-end;

    .btnimg {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background: #2354e3;
      box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(2, 1, 20, 0.16);
      opacity: 1;
    }
  }
}
</style>
